<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>支付结果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="hotcss" content="design-width=640 max-width=640 initial-dpr=1">
    <link href="/vendor/layui-v2.8.8/layui/css/layui.css?v={{ time() }}" rel="stylesheet">
    <script src="/vendor/layui-v2.8.8/layui/layui.js?v={{ time() }}"></script>
    @vite(['resources/scss/switch_pay/info.scss', 'resources/js/switch_pay.js'])
</head>

<body>
    <div class="container" id="vapp">
        <div class="pay-container">
            <div class="pay-header">
                支付状态
                <div class="close-btn" v-on:click="goBack()">
                    <svg t="1691655085303" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10310" id="mx_n_1691655085304">
                        <path
                            d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
                            p-id="10311" fill="#ffffff"></path>
                    </svg>
                </div>
            </div>
            <div class="pay-content">
                <div class="order-info">
                    <div class="order-amount">￥<label class="amount">{{ sprintf("%.2f", $order->money) }}</label></div>
                </div>
                <div class="pay-type-box">
                    <div class="type-item" v-if="!payOkStatus">
                        <div class="paying-icon auto-animation">
                            <svg t="1709192536790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5118">
                                <path d="M517.12 252.586667c-13.653333 0-25.6-11.946667-25.6-25.6V59.733333c0-13.653333 11.946667-25.6 25.6-25.6s25.6 11.946667 25.6 25.6v167.253334c0 13.653333-11.946667 25.6-25.6 25.6z" fill="#1296db" opacity=".5" p-id="5119"></path><path d="M314.026667 332.8c-6.826667 0-13.653333-1.706667-18.773334-6.826667l-117.76-117.76c-10.24-10.24-10.24-25.6 0-35.84 10.24-10.24 25.6-10.24 35.84 0l117.76 117.76c10.24 10.24 10.24 25.6 0 35.84-3.413333 3.413333-10.24 6.826667-17.066666 6.826667z" fill="#1296db" opacity=".6" p-id="5120"></path><path d="M226.986667 532.48H59.733333c-13.653333 0-25.6-11.946667-25.6-25.6s11.946667-25.6 25.6-25.6h167.253334c13.653333 0 25.6 11.946667 25.6 25.6s-11.946667 25.6-25.6 25.6z" fill="#1296db" opacity=".7" p-id="5121"></path><path d="M189.44 853.333333c-6.826667 0-13.653333-1.706667-18.773333-6.826666-10.24-10.24-10.24-25.6 0-35.84l117.76-117.76c10.24-10.24 25.6-10.24 35.84 0s10.24 25.6 0 35.84l-117.76 117.76c-5.12 5.12-11.946667 6.826667-17.066667 6.826666z" fill="#1296db" opacity=".8" p-id="5122"></path><path d="M506.88 989.866667c-13.653333 0-25.6-11.946667-25.6-25.6v-167.253334c0-13.653333 11.946667-25.6 25.6-25.6s25.6 11.946667 25.6 25.6v167.253334c0 13.653333-11.946667 25.6-25.6 25.6z" fill="#1296db" opacity=".9" p-id="5123"></path><path d="M827.733333 860.16c-6.826667 0-13.653333-1.706667-18.773333-6.826667l-117.76-117.76c-10.24-10.24-10.24-25.6 0-35.84s25.6-10.24 35.84 0l117.76 117.76c10.24 10.24 10.24 25.6 0 35.84-3.413333 5.12-10.24 6.826667-17.066667 6.826667z" fill="#1296db" p-id="5124"></path><path d="M964.266667 542.72h-167.253334c-13.653333 0-25.6-11.946667-25.6-25.6s11.946667-25.6 25.6-25.6h167.253334c13.653333 0 25.6 11.946667 25.6 25.6s-11.946667 25.6-25.6 25.6z" fill="#1296db" opacity=".3" p-id="5125"></path><path d="M716.8 339.626667c-6.826667 0-13.653333-1.706667-18.773333-6.826667-10.24-10.24-10.24-25.6 0-35.84l117.76-117.76c10.24-10.24 25.6-10.24 35.84 0 10.24 10.24 10.24 25.6 0 35.84L733.866667 332.8c-3.413333 5.12-10.24 6.826667-17.066667 6.826667z" fill="#1296db" opacity=".4" p-id="5126"></path>
                            </svg>
                        </div>
                        <div class="item-text">支付进行中...</div>
                    </div>
                    <div class="type-item" v-if="payOkStatus==1">
                        <div class="payok-icon">
                            <svg t="1709193101622" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7054">
                                <path d="M512 1024C229.216 1024 0 794.784 0 512S229.216 0 512 0s512 229.216 512 512-229.216 512-512 512z m-49.568-377.152l-146.496-148.224-96.512 92.256c70.208 37.76 168.64 106.816 252.896 213.696 59.52-111.936 243.008-340.896 332.256-361.28-14.4-57.728-22.56-166.016 0-223.872-183.04 120.704-342.144 427.424-342.144 427.424z" fill="#029B00" p-id="7055"></path>
                            </svg>
                        </div>
                        <div class="item-text">支付完成</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const app = vueCreateApp({
            data() {
                var payok = 0
                var status = {{ $order->status }}
                if (status in [1,2,3]) {
                    payok = 1
                }
                return {
                    tradeNo: '{{ $order->trade_no }}',
                    checkTradeNo: '',
                    checkTradeNoCount: 0,
                    payOkStatus: payok,
                }
            },
            mounted() {
                this.checkOrderStatusBegin(this.tradeNo)
            },
            methods: {
                goBack() {
                    if (window.Juheh5) {
                        window.Juheh5.payCb(0, 'success', JSON.stringify({}))
                    }
                },
                payOk() {
                    if (window.Juheh5) {
                        window.Juheh5.payCb(0, 'success', JSON.stringify({}))
                    }
                },
                checkOrderStatusBegin(trade_no) {
                    const _this = this

                    if (_this.checkTradeNo == trade_no) {
                        _this.checkTradeNoCount = 0
                        return
                    }
                    _this.checkTradeNo = trade_no
                    _this.checkTradeNoCount = 0

                    setTimeout(() => {
                        _this.checkOrderStatus(trade_no)
                    }, 3000);
                },
                checkOrderStatus(trade_no) {
                    const _this = this

                    // 如果当前订单与检测订单不一致
                    if (_this.tradeNo != trade_no) {
                        return
                    }

                    var params = {
                        trade_no: trade_no,
                    }
                    var url = 'https://sdk-log.tkungame.com/api/sdk/order/info'
                    http.post(url, params, function(code, msg, data) {
                        if (code !== 0) {
                            return
                        }
                        // 如果已经支付成功则关闭页面
                        if (data.status!=0 && data.status!=11) {
                            return _this.payOkStatus = 1
                        }

                        // 否则等待下一秒查询
                        _this.checkTradeNoCount++
                        if (_this.checkTradeNoCount < 60) {
                            setTimeout(() => {
                                _this.checkOrderStatus(trade_no)
                            }, 2000);
                        }
                    }, false);
                }
            }
        })
        app.mount('#vapp')
    })
</script>
<style>
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .auto-animation {
        animation: spin 1.5s linear infinite;
    }
</style>
</html>
